<template>
  <div class="allContent">
    <div class="image"></div>
    <div class="text">
      <h1>{{contData.storyTitle||contData.title}}</h1>
      <i>作者：云姑娘</i>
      <img :src="image" alt="">
      <p v-for="cont in contText" :key="cont.id">{{cont.field}}</p>
    </div>
  </div>
</template>

<script>
import { getCont, getContImage } from '../../api/content'
export default {
  name: 'cont',
  data () {
    return {
      contData: '',
      contText: '',
      api: 'http://47.96.89.247:8080/qf_hotel',
      image: ''
    }
  },
  created () {
    getCont(this.$route.query).then(res => {
      this.contText = res.data
    }).catch(err => console.log('数据加载异常', err))
    getContImage(this.$route.query).then(res => {
      this.contData = res.data
      if (this.contData.image) {
        this.image = this.api + this.contData.image
      } else if (this.contData.photo) {
        this.image = this.api + this.contData.photo
      }
    }).catch(err => console.log('数据加载异常', err))
  }
}
</script>

<style lang="scss">
body{
  background: #f4f4f4;
}
  .allContent{
    .image{
      height: 450px;
      background: url(http://www.passingcloud.cn/bxys/resource/img/history2.jpg) no-repeat;
      background-size: 100% 100%;
    }
    .text{
      width: 1000px;
      background: #fff;
      padding: 20px;
      margin: 10px auto;
      h1{
      font-size: 32px;
      }
      i{
        display: block;
        color: #888888;
        margin: 10px 0 30px 0;
      }
      img{
        width: 100%;
        margin: 0 0 38px;
      }
      p{
        color: #666666;
        font-size: 18px;
        line-height: 38px;
        margin-bottom: 28px;
        //text-indent: 40px;
        padding: 0 20px;
      }
    }
  }
</style>
